<template>
  <div class="screensaver">
    <div class="mask"></div>
    <video autoplay loop muted playsinline v-if="videoUrl">
      <source :src="videoUrl" type="video/mp4" />
    </video>
    <img v-if="imageUrl" :src="imageUrl" />
    <!-- <pdf v-if="pdfUrl" :src="pdfUrl" class="pdf" @loaded="onEditCanvas" style="width: auto;height: 100vh; overflow: hidden;"/> -->
    <div class="textBtn">
      <el-button type="info" @click="resetScreenSaver"
        >点 击 进 入<i class="el-icon-arrow-right el-icon--right"></i
        ><i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
    </div>
  </div>
</template>

<script>
// import pdf from "vue-pdf";
export default {
  // components: {
  //   pdf,
  // },
  data() {
    return {
      imageUrl: "", // 图片URL
      videoUrl: "", // MP4视频URL
      pdfUrl: "", //pdf
    };
  },
  created() {
    let sopData = JSON.parse(localStorage.getItem("sopData"));
    if (!sopData) {
      this.imageUrl=imgUrl;
      // this.pdfUrl = '/static/pdf/11.pdf';
    } else if (sopData.sopFileType == ".mp4") {
      this.videoUrl = process.env.VUE_APP_BASE_API + sopData.sopFileUrl;
    // } else if (sopData.sopFileType == ".pdf") {
    //   this.pdfUrl = process.env.VUE_APP_BASE_API + sopData.sopFileUrl;
    } else {
      this.imageUrl =process.env.VUE_APP_BASE_API + sopData.sopFileUrl;
    }
  },
  mounted() {
    document.addEventListener("keydown", this.keyDownHandle);
    document.addEventListener("contextmenu", this.contextmenuHandle);
  },
  destroyed() {
    document.removeEventListener("keydown", this.keyDownHandle);
    document.removeEventListener("contextmenu", this.contextmenuHandle);
  },
  methods: {
    onEditCanvas(pdf) {
      this.$nextTick(() => {
        // 获取canvas元素
        const canvas = this.$el.querySelector('canvas');
        if (canvas) {
           canvas.style.height = '256px';
          canvas.style.width = 'auto';
          canvas.style.margin='auto';
          canvas.style.position = 'absolute';
          canvas.style.left = '0'; 
          canvas.style.right = '0';  
          canvas.style.top = '0';  
          canvas.style.bottom = '0';  
        }
      });
    },
    // 解锁
    resetScreenSaver() {
      this.$store.commit("lockscreen/updatelockTime", 0);
    },
    // 监听鼠标按下事件，阻止 F12 事件
    keyDownHandle(event) {
      if (event.keyCode == 13) {
        this.unLock();
      }
      return event.keyCode !== 123 || (event.returnValue = false);
    },
    // 阻止鼠标右键事件
    contextmenuHandle(event) {
      return (event.returnValue = false);
    },
  },
};
</script>
<style scoped>
.screensaver {
 position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 9999;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明遮罩层 */
}

.screensaver video,
.screensaver img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  margin:auto;
}                 
.textBtn {
  position: absolute;
  top: 10%;
  left: 85%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}
.el-button {
  width: 92%;
  height: 8%;
  font-size: 22px;
}
.el-icon--right {
  animation: moveRight 2s infinite alternate;
}
@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(10px);
  }
}
.pdf canvas {
  height: 100% !important;
}
</style>
